<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>更多</title>
    <link rel="stylesheet" href="assets/css/amazeui.min.css">
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="stylesheet" href="css/index/index.css">
    <link rel="stylesheet" href="css/swiper-3.3.1.min.css">
</head>

<body>
    <header>
        <img src="img/z-jiantou.png">
        <span>更多</span>
    </header>
    <nav class="swiper-container swiper-container-horizontal h45">
        <div class="swiper-wrapper">
            <div class="swiper-slide active">
                <a href="javascript:;">全部</a>
            </div>
            <div class="swiper-slide">
                <a href="javascript:;">糕点种类</a>
            </div>
            <div class="swiper-slide">
                <a href="javascript:;">品牌</a>
            </div>
            <div class="swiper-slide">
                <a href="javascript:;">口味</a>
            </div>
            <div class="swiper-slide">
                <a href="javascript:;">特色</a>
            </div>
        </div>
    </nav>
    <section class="swiper-container swiper-container-horizontal">
        <div class="swiper-wrapper">
            <!-- 全部 -->
            <div class="swiper-slide">
                <ul class="more_lists">
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9
                                <p>
                                    <img src="img/bao.png" alt="">×6</p>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9
                                <p>
                                    <img src="img/bao.png" alt="">×6</p>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!-- 糕点种类 -->
            <div class="swiper-slide">
                <ul class="more_lists">
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- 品牌 -->
            <div class="swiper-slide">
                <ul class="more_lists">
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- 口味 -->
            <div class="swiper-slide">
                <ul class="more_lists">
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- 特色 -->
            <div class="swiper-slide">
                <ul class="more_lists">
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                    <li>
                        <img src="img/img_left.jpg" width="125px" height="125px">
                        <ul>
                            <li>糍粑5斤整箱适合老年人来人</li>
                            <li class="color_active">29.9</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </section>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/swiper-3.3.1.min.js"></script>
    <script language="javascript">
        $(function () {
            var navSwiper = new Swiper('nav', {
                freeMode: true,
                slidesPerView: '4',
                freeModeSticky: true,
            });
            var tabsSwiper = new Swiper('section', {
                speed: 500,
                onTransitionStart: function (swiper) {
                    $("nav .active").removeClass('active');
                    $("nav .swiper-slide").eq(swiper.activeIndex).addClass('active');
                }
            })
            $("nav .swiper-slide").on('click', function (e) {
                e.preventDefault()
                $("nav .active").removeClass('active')
                $(this).addClass('active')
                tabsSwiper.slideTo($(this).index())
            })
        })
    </script>
</body>

</html>